<template>
	<view class="allteacher">
		<search></search>
		<view class="teacherList">
			<view class="item" v-for="(item,index) in teachers" :key="item.id">
				<every-teacher :teacher="item"></every-teacher>
			</view>
		</view>
		<uni-load-more :status="status" iconType="circle"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		apiGetTeachers
	} from '../../apis/teacher.js'
	import {
		ref
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const pageCurrent = ref(1)
	const pageSize = ref(10)
	const teachers = ref([])
	const total = ref(0)
	const status= ref('loading')
	const getTeachers = async (pageCurrent, pageSize) => {
		const res = await apiGetTeachers(pageCurrent, pageSize)
		teachers.value = [...teachers.value, ...res.data.data.records]
		total.value = res.data.data.total
		uni.stopPullDownRefresh()
	}
	getTeachers(pageCurrent.value, pageSize.value)
	onReachBottom(() => {
		if (pageCurrent.value * pageSize.value <= total.value) {
			pageCurrent.value++
			getTeachers(pageCurrent.value, pageSize.value)
		}else{
			status.value = 'noMore'
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		}
	})
	onPullDownRefresh(() => {
		teachers.value = []
		pageCurrent.value = 1
		getTeachers(pageCurrent.value, pageSize.value)
	})
</script>

<style lang="scss" scoped>
	.allteacher {
		background:
		linear-gradient(to bottom,transparent,#fff),
		linear-gradient(to right,#beecd8,#F4E2D8);
		.teacherList {
			padding: 0 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 10rpx;

			.item {
				width: 330rpx;
				height: 330rpx;
				margin: 30rpx auto;
			}
		}
	}
</style>